<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>供应链综合服务平台登录页</title>
	<link rel="stylesheet" href="component/elementUI/index.css">
	<link rel="stylesheet" href="admin/css/other/login.css" />
	<style>
		/* 给id为app的外层容器添加样式 */
		.container {
			display: flex;
			justify-content: center;
			align-items: center;
			min-height: 100vh;
		}

		/* 隐藏滚动条 */
		body {
			overflow: hidden;
		}

		.shadow {
			border-color: #252020;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.15);
		}

		.el-tabs__header {
			margin-bottom: 25px !important;
		}

		.layui-form-item {
			margin: 0 !important;
		}

		.flex {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.flex .el-button {
			padding: 0;
		}
	</style>
</head>
<!-- 代 码 结 构 -->

<body style="background-size: cover;">
	<div id="app" v-cloak>
		<div class="container">
			<form class="layui-form" action="javascript:void(0);">
				<div class="layui-form-item">
					<div style="display: flex;align-items: center;justify-content: center">
						<span style="font-weight: 700;font-size:2em ;">供应链综合服务平台</span>
					</div>
					<div class="text">欢迎登录</div>
				</div>
				<div class="shadow" style="padding: 6%;margin-top: 3%;">
					<el-tabs v-model="activeName" @tab-click="handleClick">
						<el-tab-pane label="账号登录" name="first">
							<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
								<!-- 手机号 -->
								<el-form-item prop="User_Number">
									<el-input v-model="ruleForm.User_Number" placeholder="请输入您注册时填写的手机号"></el-input>
								</el-form-item>
								<!-- 密码 -->
								<el-form-item prop="Pass_Word">
									<el-input v-model="ruleForm.Pass_Word" placeholder="请输入您注册时填写的密码"
										show-password></el-input>
								</el-form-item>
								<!-- 记住密码 -->
								<div class="flex">
									<el-checkbox v-model="checked">记住密码</el-checkbox>
									<el-button  @click="toRegister" type="text">没有账号？前往注册</el-button>
								</div>
							</el-form>
						</el-tab-pane>
						<!-- <el-tab-pane label="验证码登录" name="second"></el-tab-pane> -->
					</el-tabs>
					<!-- 登 录 -->
					<div style="margin-top: 10px;">
						<el-button class="my-button" :loading="loading" @click="handleLogin('ruleForm')"
							type="primary">登 录</el-button>
					</div>
					<!-- 注册 -->
					<div>
						
					</div>
				</div>
			</form>
		</div>
		<!-- 多企业选项 -->
		<el-dialog title="请选择企业" :visible.sync="dialogVisible" width="800px" :show-close="false"
			:close-on-click-modal="false" :fullscreen="isMiniprogram()">
			<el-radio-group v-model="isSelect" style="width: 100%">
				<el-table :data="enterprise" border @row-click="handleChange">
					<el-table-column width="35">
						<template v-slot="{row}">
							<el-radio :label="row.Enterprise_Info_SerialNumber">{{''}}</el-radio>
						</template>
					</el-table-column>
					<el-table-column label="图片" width="140">
						<template v-slot="{row}">
							<el-image style="width: 100%;border-radius: 20px;"
								:src="imageApi + row.Enterprise_Logo"></el-image>
						</template>
					</el-table-column>
					<el-table-column prop="Enterprise_Name" label="企业名称"></el-table-column>
				</el-table>
			</el-radio-group>
			<span slot="footer" class="dialog-footer">
				<el-button @click="handleClose">取 消</el-button>
				<el-button type="primary" @click="handleSubmit">确 定</el-button>
			</span>
		</el-dialog>
	</div>
	<!-- 资 源 引 入 -->
	<script type="text/javascript" src="component/layui/layui.js"></script>
	<script type="text/javascript" src="component/pear/pear.js"></script>
	<script type="text/javascript" src="utils/jquery.min.js"></script>
	<script type="text/javascript" src="utils/jquery.cookie.js"></script>
	<script type="text/javascript" src="utils/vue.min.js"></script>
	<script type="text/javascript" src="component/elementUI/index.js"></script>
	<script type="text/javascript" src="utils/utils.js"></script>
	<script type="text/javascript" src="utils/http.js"></script>
	<script>
		new Vue({
			el: '#app',
			data() {
				return {
					checked: true,
					ruleForm: {
						Word: "",
						User_Number: '',
						Pass_Word: '',
					},
					rules: {
						User_Number: [
							{ required: true, message: '请输入手机号', trigger: 'blur' },
						],
						Pass_Word: [
							{ required: true, message: '请输入密码', trigger: 'blur' }
						],
						Word: [
							{ required: true, message: '请输入验证码', trigger: 'blur' }
						],
					},
					formData: {},
					enterprise: [],//可选企业
					isSelect: '',
					activeName: 'first',
					countdown: 0, // 倒计时的秒数
					isCounting: false, // 用于标记是否正在倒计时
					loading: false,
					dialogVisible: false,
				}
			},
			mounted() {
				this.ruleForm.User_Number = localStorage.getItem("User_Number")
				this.ruleForm.Pass_Word = localStorage.getItem("Pass_Word")
				if (sessionStorage.getItem("REDIRECT")) {
					this.$notify.error({
						title: '登录提示',
						message: sessionStorage.getItem("REDIRECT")
					});
					sessionStorage.removeItem("REDIRECT");
				}
			},
			methods: {
				handleClick() {
					console.log(this.activeName);
				},
				handleChange(row) {
					this.isSelect = row.Enterprise_Info_SerialNumber;
				},
				handleSubmit() {
					this.$notify.success({
						title: '登录提示',
						message: "登录成功！"
					});
					setCookie('enterprise', this.isSelect);
					this.dialogVisible = false;
					const timer = setTimeout(() => {
						clearTimeout(timer);
						if (isMiniprogram()) {//小程序登录
							window.history.back();
						} else {
							window.location.href = './index.html';
						}
					}, 300)
				},
				//登录方法
				handleLogin(ruleForm) {
					this.$refs[ruleForm].validate((valid) => {
						this.loading = true;
						const { User_Number, Pass_Word } = this.ruleForm;
						if (this.checked) {
							localStorage.setItem("User_Number", User_Number)
							localStorage.setItem("Pass_Word", Pass_Word)
						} else {
							localStorage.removeItem("User_Number")
							localStorage.removeItem("Pass_Word")
						}
						httpRequest({
							url: `/login/userLogin`,
							type: 'POST',
							data: {
								UserName: User_Number,
								Password: Pass_Word
							},
							dataType: "text",
							Vue: this
						}).then(res => { }).catch(xhr => {
							if (xhr.status == 302) return
							this.$message({
								message: '系统错误，请联系开发者!',
								type: 'error'
							})
						}).finally(() => {
							this.loading = false;
						});
					})
				},
				handleClose() {// 取消选择企业
					removeCookie('token');
					removeCookie('user');
					this.dialogVisible = false;
				},
				toRegister() {// 跳转到注册页
					window.location.href = "register.html"; 

				}
			}
		})
	</script>
</body>

</html>